<template>
  <div>
    <!-- 标题 -->
    <div class="headers">
      <h2 class="header-m">购物车</h2>
    </div>
    <div class="header">
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">48小时快速退款</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">满88元免邮费</span>
        </div>
      </div>
    <!-- 商品展示 -->
    <div class="cart">
      <van-swipe-cell class="cart-I" v-for="item in goodList" :key="item.id">
        <div class="cartItem">
          <input type="checkbox" v-model="item.checked" class="checkbox" />
          <!-- <img src="../../assets/ava.png" alt=""> -->
          <div class="cart-m">
            <div class="img-txt">
              <img class="img" :src="item.list_pic_url" alt="" />
              <div class="cart-txt">
                <span class="txt-t">{{ item.goods_name }}</span>
                <span class="txt-b">${{ item.retail_price }}</span>
              </div>
            </div>
          </div>
          <van-stepper
            :name="item.goods_id"
            @plus="add(item.goods_id)"
            @minus="desc(item.goods_id)"
            v-model="item.number"
          />
        </div>
        <!-- 右侧删除 -->
        <template #right>
          <van-button
            square
            type="danger"
            @click="dele(item.id)"
            text="删除"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="check">全选<input type="checkbox" v-model="allCheck" /></div>
      <div>
        合计<span>${{ total }}</span>
        <button @click="toOrder">下单</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { cartList, submitAction, deleteAction, addCart } from '@/api/cart/cart'
import { useRouter } from 'vue-router'
import { dele as Delete } from '@/mixin/index'

export default {
  name: 'CartApi',
  setup () {
    const router = useRouter()
    const goodList = ref([])
    const allCheck = computed({
      get () {
        if (goodList.value.length === 0) {
          return false
        }
        return goodList.value.every((el) => el.checked === true)
      },
      set (val) {
        return goodList.value.map((el) => (el.checked = val))
      }
    })
    const total = computed(function () {
      return goodList.value
        .filter((el) => el.checked)
        .reduce((pre, current) => {
          return pre + current.number * current.retail_price
        }, 0)
    })
    const init = () => {
      cartList({
        openId: localStorage.getItem('openId')
      }).then((res) => {
        console.log(res)
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].checked = false
        }
        goodList.value = res.data
      })
    }
    init()

    const toOrder = async () => {
      const a = goodList.value.filter((el) => el.checked)
      //  console.log(a);
      console.log(goodList.value, a)
      // 判断复选框是否选中
      if (a.length > 0) {
        const a = await submitAction({
          openId: localStorage.getItem('openId'),
          allPrise: total.value,
          goodsId: goodList.value
            .filter((el) => el.checked)
            .map((el) => {
              return el.goods_id
            })
            .join(',')
        })
        console.log(a)
        router.push('cart/order')
      } else {
        return 0
      }
    }
    // 点击加减只传正负一,调用接口改变后台数据
    const add = (id) => {
      addCart({
        goodsId: id,
        number: 1,
        openId: localStorage.getItem('openId')
      }).then(res => {
        console.log(res)
      })
    }
    const desc = (id) => {
      addCart({
        goodsId: id,
        number: -1,
        openId: localStorage.getItem('openId')
      }).then(res => {
        console.log(res)
      })
    }
    // 删除
    const dele = (id) => {
      const fn = () => {
        deleteAction({
          id: id
        }).then((res) => {
          console.log(res)
          init()
        })
      }
      Delete('确定删除?', fn)
    }

    return { goodList, add, dele, desc, toOrder, allCheck, total }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
